﻿
@{
    ViewBag.Title = "Home Page";
}

@section scripts{
 
<script src="~/Scripts/app/UI/Home/Index.js"></script>
}
 <div class="container">
    <h1 class="col-md-pull-8">Bootstrap 3 Thumbnail Slider / Carousel</h1>
    <!-- main slider carousel -->
    <div class="row">
        <div class="col-xs-12" id="slider">
            <div class="col-xs-12 col-md-9" id="carousel-bounding-box">
                <div id="myCarousel" class="carousel slide">

                    <!-- main slider carousel items -->
                    <div class="carousel-inner">
                        <div class="item active" data-slide-number="0">
                            <img src="//placehold.it/2500X1000/6666ff/fff" class="img-responsive">
                            <div class="container">
                                <div class="carousel-caption contentCaption" style="text-align:left">
                                    <h1>slide 0 header</h1>
                                    <p class="lead">Slide 0</p>
                                    <a class="btn btn-default btn-primary" href="http://www.cnn.com">Learn More</a>
                                </div>
                            </div>
                        </div>

                        <div class="item" data-slide-number="1">
                            <img src="//placehold.it/2500X1000/990000/fff" class="img-responsive">
                            <div class="container">
                                <div class="carousel-caption contentCaption" style="text-align:left">
                                    <h1>Slide 1 header</h1>
                                    <p class="lead">Slide 1</p>
                                    <a class="btn btn-default btn-primary" href="http://www.cnn.com">Learn More</a>
                                </div>
                            </div>
                        </div>

                        <div class="item" data-slide-number="2">
                            <img src="//placehold.it/2500X1000/999900/fff" class="img-responsive">
                            <div class="container">
                                <div class="carousel-caption contentCaption" style="text-align:left">
                                    <h1>Slide 2 header</h1>
                                    <p class="lead">Slide 2</p>
                                    <a class="btn btn-default btn-primary" href="http://www.cnn.com">Learn More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- main slider carousel nav controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </a>
                </div>
            </div>

            <!-- thumb navigation carousel items -->
            <div class="col-xs-12 col-md-3" id="slider-thumbs">
                <ul class="list-group">
                    <li class="list-group-item item active">
                        <div>
                            <a id="carousel-selector-0" class="carousel-selector sidebar1 selected" href="#myCarousel" data-slide-to="0">
                                <div class="image">
                                    <img src="//placehold.it/500X100/000000/fff" class="img-responsive">
                                </div>
                                <div class="sidebar-text"><p><br>Side 0</p></div>
                            </a>
                        </div>
                    </li>

                    <li class="list-group-item item">
                        <div>
                            <a id="carousel-selector-1" class="carousel-selector sidebar1" href="#myCarousel" data-slide-to="1">
                                <div class="image">
                                    <img src="//placehold.it/500X100/cccccc/fff" class="img-responsive">
                                </div>
                                <div class="sidebar-text"><p><br>Side 1</p></div>
                            </a>
                        </div>
                    </li>

                    <li class="list-group-item item">
                        <div>
                            <a id="carousel-selector-2" class="carousel-selector sidebar1" href="#myCarousel" data-slide-to="2">
                                <div class="image">
                                    <img src="//placehold.it/500X100/333333/fff" class="img-responsive">
                                </div>
                                <div class="sidebar-text"><p><br>Side 2</p></div>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--/main slider carousel-->
</div>